<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #charts {
        width: 100%;
        height: 700px;
      }
    </style>
  </head>
  <body>
    <div id="charts"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
    <script>
      // 获取dom元素
      const chartDom = document.getElementById('charts')
      // 初始化
      const myECharts = echarts.init(chartDom)
      // data
      const data = [
        ['星期一', 35, 25, 'xx', 80],
        ['星期二', 30, 45, 'yy', 50],
        ['星期三', 25, 25, 'zz', 70],
        ['星期四', 55, 25],
        ['星期五', 6, 80],
        ['星期六', 10, 15],
        ['星期日', 59, 67]
      ]
      // 设置配置项
      myECharts.setOption({
        title: {
          text: '数据可视化'
        },

        xAxis: {
          type: 'category',
          data: [
            '星期一',
            '星期二',
            '星期三',
            '星期四',
            '星期五',
            '星期六',
            '星期日'
          ]
        },
        // y轴
        yAxis: {
          axisLine: {
            show: true
          }
        },
        // 自定义数据,默认是从第二维度开始的，series使用则使用encode配合使用
        dataset: {
          source: data
        },

        series: [
          {
            type: 'bar',
            name: 'bar',
            encode: {
              x: 0,
              y: 1
            }
          },
          {
            type: 'line',
            name: 'line',
            encode: {
              x: 0,
              y: 2
            }
          },
          {
            type: 'pie',
            name: 'pie',
            width: '200',
            center: ['65%', 80],
            left: 'center',
            radius: ['20%', '45%'],
            encode: {
              itemName: 3,
              value: 4
            },
            label: {
              overflow: 'break', //解决有的字体不出现
              position: 'outside',
              fontSize: 16
            }
          }
        ],
        tooltip: {}, //提示数据显示
        // 设置点击图片不显示，要给每一个series有一个name
        legend: {
          right: 100,
          data: [
            {
              name: 'bar',
              icon: 'circle', //强制设置图形为圆
              textStyle: 'red' //设置文本的红色
            },
            'line',
            'pie'
          ]
        },
        toolbox: {
          right: 'center',
          feature: {
            dataZoom: {
              show: true
            },
            dataView: {
              show: true
            },
            restore: {
              show: true
            },
            saveAsImage: {
              title: '保存图片',
              show: true
            }
          }
        },
        grid: {
          // 图片两边空隙的位置
          left: 30,
          right: 20
        },
        color: ['pink', 'yellowgreen', 'skyblue', 'blue']
      })
    </script>
  </body>
</html>
